<template>
  <div class="min-h-screen bg-white">
    <!-- 导航栏 -->
    <nav class="bg-white/95 backdrop-blur-md shadow-lg sticky top-0 z-50 border-b border-gray-100">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-20">
          <!-- Logo -->
          <div class="flex items-center">
            <div class="h-12 w-12 bg-gradient-to-br from-blue-600 to-blue-800 rounded-xl flex items-center justify-center shadow-lg">
              <svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
            </div>
            <span class="ml-4 text-xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">精工机械</span>
          </div>
          
          <!-- 桌面导航菜单 -->
          <div class="hidden md:flex items-center space-x-2">
            <router-link to="/website" class="text-gray-900 bg-blue-50 px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:bg-blue-100 hover:shadow-sm">首页</router-link>
            <router-link to="/website/products" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-2 rounded-lg font-medium transition-all duration-200">产品中心</router-link>
            <router-link to="/website/about" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-2 rounded-lg font-medium transition-all duration-200">关于我们</router-link>
            <router-link to="/website/news" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-2 rounded-lg font-medium transition-all duration-200">新闻资讯</router-link>
            <router-link to="/website/service" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-2 rounded-lg font-medium transition-all duration-200">服务支持</router-link>
            <router-link to="/website/contact" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-2 rounded-lg font-medium transition-all duration-200">联系我们</router-link>
          </div>
          
          <!-- 移动端菜单按钮 -->
          <div class="md:hidden">
            <button @click="mobileMenuOpen = !mobileMenuOpen" class="text-gray-700 hover:text-blue-600 p-2 rounded-lg hover:bg-gray-100 transition-colors">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div v-show="mobileMenuOpen" class="md:hidden border-t border-gray-100 py-4">
          <div class="flex flex-col space-y-2">
            <router-link to="/website" class="text-gray-900 bg-blue-50 px-4 py-3 rounded-lg font-medium">首页</router-link>
            <router-link to="/website/products" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-3 rounded-lg font-medium transition-colors">产品中心</router-link>
            <router-link to="/website/about" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-3 rounded-lg font-medium transition-colors">关于我们</router-link>
            <router-link to="/website/news" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-3 rounded-lg font-medium transition-colors">新闻资讯</router-link>
            <router-link to="/website/service" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-3 rounded-lg font-medium transition-colors">服务支持</router-link>
            <router-link to="/website/contact" class="text-gray-700 hover:text-blue-600 hover:bg-gray-50 px-4 py-3 rounded-lg font-medium transition-colors">联系我们</router-link>
          </div>
        </div>
      </div>
    </nav>

    <!-- 英雄横幅区域 -->
    <section id="home" class="relative h-screen flex items-center justify-center bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 text-white overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute inset-0">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-600/20 to-transparent"></div>
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-400/20 rounded-full blur-3xl"></div>
      </div>
      <div class="absolute inset-0 bg-cover bg-center opacity-30" style="background-image: url('https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20industrial%20machinery%20factory%20production%20line%20with%20advanced%20equipment%20and%20technology%2C%20professional%20lighting%2C%20clean%20environment&image_size=landscape_16_9')"></div>
      
      <div class="relative z-10 text-center text-white max-w-5xl mx-auto px-4">
        <div class="mb-6">
          <span class="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-sm font-medium border border-white/20">
            🏭 专业机械制造领导者
          </span>
        </div>
        <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
          <span class="bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
            精工制造
          </span>
          <span class="block text-blue-100 mt-2">
            品质铸就未来
          </span>
        </h1>
        <p class="text-xl md:text-2xl mb-10 text-blue-100 max-w-3xl mx-auto leading-relaxed">
          30年专业制造经验，为全球客户提供高品质机械设备解决方案
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <router-link to="/website/products" class="group bg-white text-blue-600 px-8 py-4 rounded-xl font-semibold hover:bg-blue-50 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
            <span class="flex items-center">
              查看产品
              <svg class="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </span>
          </router-link>
          <router-link to="/website/contact" class="group border-2 border-white/30 backdrop-blur-sm text-white px-8 py-4 rounded-xl font-semibold hover:bg-white hover:text-blue-600 transition-all duration-300">
            <span class="flex items-center">
              立即咨询
              <svg class="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
            </span>
          </router-link>
        </div>
      </div>
      
      <!-- 底部波浪装饰 -->
      <div class="absolute bottom-0 left-0 w-full">
        <svg viewBox="0 0 1200 120" preserveAspectRatio="none" class="relative block w-full h-16 fill-white">
          <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"></path>
        </svg>
      </div>
    </section>

    <!-- 公司简介区域 -->
    <section id="about" class="py-20 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute top-0 right-0 w-96 h-96 bg-blue-100/30 rounded-full blur-3xl -translate-y-48 translate-x-48"></div>
      <div class="absolute bottom-0 left-0 w-96 h-96 bg-indigo-100/30 rounded-full blur-3xl translate-y-48 -translate-x-48"></div>
      
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div class="text-center mb-16">
          <div class="inline-block px-4 py-2 bg-blue-100 text-blue-600 rounded-full text-sm font-medium mb-4">
            🏢 关于我们
          </div>
          <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            <span class="bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
              专业制造，品质保证
            </span>
          </h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            30年专业制造经验，致力于为全球客户提供高品质的机械设备和解决方案
          </p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div class="relative">
            <div class="absolute -inset-4 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-20"></div>
            <img class="relative rounded-2xl shadow-2xl" src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20machinery%20manufacturing%20company%20building%20exterior%20with%20professional%20architecture%2C%20blue%20sky%2C%20corporate%20style&image_size=landscape_4_3" alt="公司外观" />
          </div>
          
          <div class="space-y-8">
            <div>
              <h3 class="text-3xl font-bold text-gray-900 mb-6">创新驱动，质量为先</h3>
              <p class="text-lg text-gray-600 leading-relaxed mb-8">
                我们是一家专业从事机械设备制造的现代化企业，成立于1993年，拥有30年的行业经验。凭借先进的生产工艺、严格的质量管理体系和专业的技术团队，我们的产品远销欧美、东南亚等50多个国家和地区，赢得了客户的广泛认可和信赖。
              </p>
            </div>
            
            <div class="grid grid-cols-2 gap-6">
              <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
                <div class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent mb-2">30+</div>
                <div class="text-gray-600 font-medium">年制造经验</div>
              </div>
              <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
                <div class="text-4xl font-bold bg-gradient-to-r from-green-600 to-green-700 bg-clip-text text-transparent mb-2">500+</div>
                <div class="text-gray-600 font-medium">合作客户</div>
              </div>
              <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
                <div class="text-4xl font-bold bg-gradient-to-r from-purple-600 to-purple-700 bg-clip-text text-transparent mb-2">50+</div>
                <div class="text-gray-600 font-medium">国家地区</div>
              </div>
              <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
                <div class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-orange-700 bg-clip-text text-transparent mb-2">99%</div>
                <div class="text-gray-600 font-medium">客户满意度</div>
              </div>
            </div>
            
            <router-link to="/website/about" class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-4 px-8 rounded-xl transition-all duration-300 inline-block shadow-lg hover:shadow-xl transform hover:-translate-y-1">
              了解更多
            </router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- 产品展示区域 -->
    <section id="products" class="py-20 bg-white relative overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute top-0 left-0 w-96 h-96 bg-blue-100/20 rounded-full blur-3xl -translate-y-48 -translate-x-48"></div>
      <div class="absolute bottom-0 right-0 w-96 h-96 bg-indigo-100/20 rounded-full blur-3xl translate-y-48 translate-x-48"></div>
      
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div class="text-center mb-16">
          <div class="inline-block px-4 py-2 bg-blue-100 text-blue-600 rounded-full text-sm font-medium mb-4">
            🔧 产品中心
          </div>
          <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            <span class="bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
              精品机械设备
            </span>
          </h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            我们提供多种类型的高品质机械设备，满足不同行业的专业生产需求
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div v-for="product in products" :key="product.id" class="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-blue-200 transform hover:-translate-y-2">
            <div class="relative overflow-hidden">
              <img :src="product.image" :alt="product.name" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500" />
              <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              <div class="absolute top-4 right-4 bg-white/90 backdrop-blur-sm rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors duration-300">{{ product.name }}</h3>
              <p class="text-gray-600 mb-4 leading-relaxed text-sm">{{ product.description }}</p>
              <button class="group/btn bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg w-full flex items-center justify-center">
                <span>查看详情</span>
                <svg class="ml-2 h-4 w-4 group-hover/btn:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </button>
            </div>
          </div>
        </div>
        
        <div class="text-center mt-16">
          <router-link to="/website/products" class="group bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-4 px-8 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 inline-flex items-center">
            查看更多产品
            <svg class="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </router-link>
        </div>
      </div>
    </section>

    <!-- 优势特色区域 -->
    <section class="py-20 bg-blue-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">我们的优势</h2>
          <p class="text-xl text-gray-600">专业、品质、服务、创新</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div v-for="advantage in advantages" :key="advantage.id" class="text-center">
            <div class="bg-blue-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path :d="advantage.icon"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ advantage.title }}</h3>
            <p class="text-gray-600">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻资讯区域 -->
    <section id="news" class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">新闻资讯</h2>
          <p class="text-xl text-gray-600">了解行业动态和公司最新消息</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="news in newsItems" :key="news.id" class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <img :src="news.image" :alt="news.title" class="w-full h-48 object-cover" />
            <div class="p-6">
              <div class="text-sm text-gray-500 mb-2">{{ news.date }}</div>
              <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ news.title }}</h3>
              <p class="text-gray-600 mb-4">{{ news.excerpt }}</p>
              <button class="text-blue-600 hover:text-blue-700 font-semibold transition-colors duration-200">
                阅读更多 →
              </button>
            </div>
          </div>
        </div>
        
        <div class="text-center mt-12">
          <router-link to="/website/news" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-200 inline-block">
            查看更多新闻
          </router-link>
        </div>
      </div>
    </section>

    <!-- 页脚区域 -->
    <footer class="bg-gray-900 text-white py-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <!-- 公司信息 -->
          <div>
            <h3 class="text-xl font-semibold mb-4">机械制造有限公司</h3>
            <p class="text-gray-400 mb-4">
              专业机械设备制造商，为全球客户提供高品质产品和服务。
            </p>
            <div class="flex space-x-4">
              <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                </svg>
              </a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
                </svg>
              </a>
            </div>
          </div>
          
          <!-- 快速链接 -->
          <div>
            <h3 class="text-xl font-semibold mb-4">快速链接</h3>
            <ul class="space-y-2">
              <li><router-link to="/website/about" class="text-gray-400 hover:text-white transition-colors duration-200">关于我们</router-link></li>
              <li><router-link to="/website/products" class="text-gray-400 hover:text-white transition-colors duration-200">产品中心</router-link></li>
              <li><router-link to="/website/service" class="text-gray-400 hover:text-white transition-colors duration-200">技术支持</router-link></li>
              <li><router-link to="/website/service" class="text-gray-400 hover:text-white transition-colors duration-200">售后服务</router-link></li>
            </ul>
          </div>
          
          <!-- 产品分类 -->
          <div>
            <h3 class="text-xl font-semibold mb-4">产品分类</h3>
            <ul class="space-y-2">
              <li><router-link to="/website/products" class="text-gray-400 hover:text-white transition-colors duration-200">数控机床</router-link></li>
              <li><router-link to="/website/products" class="text-gray-400 hover:text-white transition-colors duration-200">工业机器人</router-link></li>
              <li><router-link to="/website/products" class="text-gray-400 hover:text-white transition-colors duration-200">自动化设备</router-link></li>
              <li><router-link to="/website/products" class="text-gray-400 hover:text-white transition-colors duration-200">精密仪器</router-link></li>
            </ul>
          </div>
          
          <!-- 联系方式 -->
          <div>
            <h3 class="text-xl font-semibold mb-4">联系我们</h3>
            <div class="space-y-2 text-gray-400">
              <p>电话：+86 400-123-4567</p>
              <p>传真：+86 021-12345678</p>
              <p>邮箱：info@machinery.com</p>
              <p>地址：上海市浦东新区工业园区123号</p>
            </div>
          </div>
        </div>
        
        <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
          <p>&copy; 2024 机械制造有限公司. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 响应式数据
const mobileMenuOpen = ref(false)

// 产品数据
const products = ref([
  {
    id: 1,
    name: '数控机床',
    description: '高精度数控加工设备，适用于各种金属加工需求',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20CNC%20machine%20tool%20in%20industrial%20setting%2C%20high%20precision%20manufacturing%20equipment&image_size=square'
  },
  {
    id: 2,
    name: '工业机器人',
    description: '智能化工业机器人，提高生产效率和产品质量',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=industrial%20robot%20arm%20in%20modern%20factory%2C%20automation%20technology%2C%20precision%20manufacturing&image_size=square'
  },
  {
    id: 3,
    name: '自动化设备',
    description: '完整的自动化生产线解决方案，提升生产效率',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=automated%20production%20line%20equipment%2C%20conveyor%20systems%2C%20industrial%20automation&image_size=square'
  },
  {
    id: 4,
    name: '精密仪器',
    description: '高精度测量和检测设备，确保产品质量',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=precision%20measurement%20instruments%2C%20quality%20control%20equipment%2C%20industrial%20testing&image_size=square'
  }
])

// 优势特色数据
const advantages = ref([
  {
    id: 1,
    title: '专业制造',
    description: '30年专业制造经验，技术实力雄厚',
    icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
  },
  {
    id: 2,
    title: '品质保证',
    description: 'ISO9001质量管理体系认证，品质可靠',
    icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
  },
  {
    id: 3,
    title: '快速交付',
    description: '完善的供应链管理，确保按时交付',
    icon: 'M13 10V3L4 14h7v7l9-11h-7z'
  },
  {
    id: 4,
    title: '全球服务',
    description: '遍布全球的服务网络，提供及时支持',
    icon: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064'
  }
])

// 新闻资讯数据
const newsItems = ref([
  {
    id: 1,
    title: '公司荣获2024年度优秀制造企业奖',
    excerpt: '凭借在机械制造领域的卓越表现和技术创新，公司荣获行业权威机构颁发的优秀制造企业奖。',
    date: '2024-01-15',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=corporate%20award%20ceremony%2C%20business%20achievement%2C%20professional%20setting&image_size=landscape_4_3'
  },
  {
    id: 2,
    title: '新一代智能制造设备正式发布',
    excerpt: '经过两年的研发，我们的新一代智能制造设备正式发布，将为客户带来更高的生产效率。',
    date: '2024-01-10',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=new%20smart%20manufacturing%20equipment%20launch%2C%20modern%20technology%2C%20industrial%20innovation&image_size=landscape_4_3'
  },
  {
    id: 3,
    title: '与欧洲知名企业达成战略合作',
    excerpt: '公司与欧洲知名制造企业签署战略合作协议，将在技术研发和市场拓展方面深度合作。',
    date: '2024-01-05',
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=business%20partnership%20handshake%2C%20international%20cooperation%2C%20corporate%20meeting&image_size=landscape_4_3'
  }
])
</script>

<style scoped>
/* 自定义样式 */
.bg-gradient-to-r {
  background: linear-gradient(to right, #1e3a8a, #1d4ed8);
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 导航栏悬停效果 */
nav a {
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  background-color: #2563eb;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

nav a:hover::after {
  width: 100%;
}

/* 卡片悬停效果 */
.hover\:shadow-xl:hover {
  transform: translateY(-4px);
  transition: all 0.3s ease;
}
</style>